<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /** 这种布局,适合 子元素固定宽度的时候, 比较方便 */
      .container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-right: -10px;
      }
      .list {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin: 15px 10px 0 0;
      } /* 和列表一样的宽度和margin值 */
      .container > i {
        width: 100px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2 style="color: red">如果每一行的列数不固定,怎么实现换行之后左对齐??</h2>
    <p>
      如果每一行的列数不固定，则上面的这些方法均不适用，需要使用其他技巧来实现最后一行左对齐。
    </p>
    <p>这个方法其实很简单，也很好理解，就是使用足够的空白标签进行填充占位，</p>
    <p>
      <strong>具体的占位数量是由最多列数的个数决定的，</strong>
      例如这个布局 <strong style="color: red;">最多7列，</strong> 那我们可以使用7个空白标签进行填充占位，
      <strong style="color: red;">最多10列，</strong>，那我们需要使用10个空白标签。
    </p>
    <p>实现的关键就是占位的<i>元素宽度和margin大小设置得和.list列表元素一样即可，其他样式都不需要写</p>
    <p style="color: blue;font-size:25px;">由于<i>元素高度为0，因此，并不会影响垂直方向上的布局呈现。并且 i 一定不要给高度哦! </p>

     <h4 style="color: green;">
        其意思大概就是: 如果我们的元素, 最终是 7 个, 那么我们需要写 7 个空白的 i 标签. <br>
        如果最后渲染的元素是 10个元素， 我们我们就需要创建 10 个空白的 i标签. <br>
        而现在, 我们最终渲染了 19 个 div 元素, 所以我们需要创建 19 个空白的 i标签,才能保证 换行之后,靠左边儿对齐, 而且间距一致. <br>
      <p style="font-size: 20px;color: red;">  在我们实际项目中, 我们可以使用动态创建元素的方式来实现创建跟 div 个数一致的 i 标签</p>
    </h4>
    <div class="container">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </body>
</html>
